﻿<template>
  <a-modal :title="title" width="70%" :visible="visible" :confirmLoading="loading" @ok="handleSubmit" @cancel="cancel">
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-collapse accordion default-active-key="1" :bordered="false" v-model="activeKey">
          <a-collapse-panel :style="customStyle" key="1" header="客户基本信息">
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="客户名称" prop="customerName">
                  <a-input v-model="entity.customerName" allow-clear autocomplete="off" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="统一社会信用代码" prop="customTaxIdcd">
                  <a-input v-model="entity.customTaxIdcd" allow-clear autocomplete="off" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="法人姓名" prop="customLegalPerson">
                  <a-input v-model="entity.customLegalPerson" allow-clear autocomplete="off" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="证件号码" prop="IdNumber">
                  <a-input v-model="entity.IdNumber" allow-clear autocomplete="off" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="联系人姓名" prop="customCollector">
                  <a-input v-model="entity.customCollector" allow-clear autocomplete="off" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="联系人电话" prop="customCollectorPhone">
                  <a-input v-model="entity.customCollectorPhone" allow-clear autocomplete="off" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="联系人邮箱" prop="customMail">
                  <a-input v-model="entity.customMail" allow-clear autocomplete="off" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="客户电话" prop="customerTelephone">
                  <a-input v-model="entity.customerTelephone" allow-clear autocomplete="off" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="开户名称" prop="AccountName">
                  <a-input v-model="entity.AccountName" allow-clear autocomplete="off" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="开户银行" prop="AccountBank">
                  <a-input v-model="entity.AccountBank" allow-clear autocomplete="off" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="银行账号" prop="BankNo">
                  <a-input v-model="entity.BankNo" allow-clear autocomplete="off" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="企业联系地址" prop="areaName">
                  <a-input v-model="entity.areaName" allow-clear autocomplete="off" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="所属代理商" prop="AgentId">
                  <a-select
                    show-search
                    option-filter-prop="children"
                    v-model="entity.AgentId"
                    :filter-option="filterOption"
                  >
                    <a-select-option v-for="(item, index) in AgentList" :key="index" :value="item.Id">
                      {{ item.AgentName }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="商务经理" prop="customerManager">
                  <a-select
                    show-search
                    option-filter-prop="children"
                    @change="ManagerChange"
                    v-model="entity.customerManagerId"
                    :filter-option="filterOption"
                  >
                    <a-select-option v-for="(item, index) in UserList" :value="item.Id" :key="index">
                      {{ item.UserName }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row v-if="title == '审核'">
              <a-col :span="12">
                <a-form-model-item label="审核">
                  <a-radio-group v-model="entity.CheckStatus" button-style="solid">
                    <a-radio-button :value="1"> 审核通过 </a-radio-button>
                    <a-radio-button :value="2"> 审核不通过 </a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col :span="12"> </a-col>
            </a-row>
          </a-collapse-panel>
          <a-collapse-panel :style="customStyle" key="2" header="需上传资料">
            <a-row>
              <a-col :span="24">
                <a-form-model-item label="证照资料（营业执照\法人证件照）" prop="imgUri">
                  <a-row>
                    <a-col :span="8">
                      <a-upload
                        name="avatar"
                        list-type="picture-card"
                        class="avatar-uploader"
                        :show-upload-list="false"
                        :customRequest="selfUpload"
                        :before-upload="beforeUpload"
                      >
                        <img
                          style="width: 102px; height: 102px"
                          v-if="entity.FrontofIDCard"
                          :src="entity.FrontofIDCard"
                          alt="电子章"
                        />
                        <div v-else>
                          <a-icon :type="loading ? 'loading' : 'plus'" />
                          <div class="ant-upload-text">身份证正面</div>
                        </div>
                      </a-upload>
                    </a-col>
                    <a-col :span="8">
                      <a-upload
                        name="avatar"
                        list-type="picture-card"
                        class="avatar-uploader"
                        :show-upload-list="false"
                        :customRequest="selfUpload1"
                        :before-upload="beforeUpload"
                      >
                        <img
                          style="width: 102px; height: 102px"
                          v-if="entity.ReversesideofIDCard"
                          :src="entity.ReversesideofIDCard"
                          alt="电子章"
                        />
                        <div v-else>
                          <a-icon :type="loading ? 'loading' : 'plus'" />
                          <div class="ant-upload-text">身份证反面</div>
                        </div>
                      </a-upload>
                    </a-col>
                    <a-col :span="8">
                      <a-upload
                        name="avatar"
                        list-type="picture-card"
                        class="avatar-uploader"
                        :show-upload-list="false"
                        :remove="handleRemove"
                        :customRequest="selfUpload2"
                        :before-upload="beforeUpload"
                      >
                        <img
                          style="width: 102px; height: 102px"
                          v-if="entity.Businesslicense"
                          :src="entity.Businesslicense"
                          alt="电子章"
                        />
                        <div v-else>
                          <a-icon :type="loading ? 'loading' : 'plus'" />
                          <div class="ant-upload-text">营业执照</div>
                        </div>
                      </a-upload>
                    </a-col>
                  </a-row>
                  <!-- <a-upload
                  list-type="picture"
                  :customRequest="UpLoad"
                  :headers="headers"
                  :remove="handleRemove"
                  :file-list="fileList">
                <a-button> <a-icon type="upload" /> upload </a-button>
              </a-upload> -->
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import OperatorCache from '@/utils/cache/OperatorCache'
import TokenCache from '@/utils/cache/TokenCache'
export default {
  props: {
    parentObj: Object,
  },
  data() {
    return {
      AgentList: [],
      UserList: [],
      BankInfo: {},
      fileList: [],
      customStyle: 'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden',
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      headers: { Authorization: 'Bearer ' + TokenCache.getToken() },
      visible: false,
      loading: false,
      files: [],
      Isclear: true, //是否清空图片框
      entity: {},
      rules: {
        customerName:[{ required: true, message: '请输入名称' }],
        customTaxIdcd:[{ required: true, message: '请输入社会统一信用代码' }],
        customLegalPerson:[{ required: true, message: '请输入法人姓名' }],
        IdNumber:[{ required: true, message: '请输入证件号码' }],
        customCollector:[{ required: true, message: '请输入联系人姓名' }],
        customCollectorPhone:[{ required: true, message: '请输入联系人电话' }],
        customMail:[{ required: true, message: '请输入联系人邮箱' }],
        customerTelephone:[{ required: true, message: '请输入客户电话' }],
        AccountName:[{ required: true, message: '请输入开户名称' }],
        AccountBank:[{ required: true, message: '请输入开户银行' }],
        BankNo:[{ required: true, message: '请输入银行账号' }],
        areaName:[{ required: true, message: '请输入企业联系地址' }],

      },
      activeKey: ['1'], //折叠面板
      title: '',
      temp: {},
    }
  },
  methods: {
    init() {
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    openForm(id, title) {
      this.init()
      this.title = title
      this.$http.post('/Base_Manage/Home/GetAgent_Select').then((res) => {
        this.AgentList = res.Data
      })
      this.$http.post("/Base_Manage/Home/GetUser_Select").then((res) => {
        this.UserList = res.Data
      })
      if (id) {
        this.Isclear = false
        this.loading = true
        this.$http.post('/Base_leasesystem_merchant/leasesystem_merchant/GetEditAll', { id: id }).then((resJson) => {
          this.loading = false
           this.entity = resJson.Data[0]
          // this.BankInfo = resJson.Data[0].Bankobj
        })
      }
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    async SaveBank() {
      await this.$http.post('/Base_leasesystem_bankcard/leasesystem_bankcard/SaveData', this.BankInfo)
    },
    ManagerChange(value)
    {
        let obj = {};
         obj = this.UserList.find((item)=>{ //这里的Data就是上面遍历的数据源
           return item.Id === value; //筛选出匹配数据
         });
      this.entity.customerManager = obj.UserName
    },
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        this.loading = true
        if(this.entity.Id){
          this.$http.post('/Base_leasesystem_merchant/leasesystem_merchant/EditMer_bank_invoiceinfo', this.entity).then((resJson) => {
          this.loading = false
          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false

            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
        }else{
          this.entity.CheckStatus = 0
          this.$http.post('/Base_leasesystem_merchant/leasesystem_merchant/AddMer_bank_invoiceinfo', this.entity).then((resJson) => {
          this.loading = false
          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false

            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
        }
      })
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      if (!isJpgOrPng) {
        this.$message.error('只能上传jpeg、png、jpg格式!')
      }
      const isLt2M = file.size / 1024 / 1024 < 20
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!')
      }
      return isJpgOrPng && isLt2M
    },
    selfUpload1({ action, file, onSuccess, onError, onProgress }) {
      this.loading = true
      const formData = new FormData()
      let that = this
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        console.log(res);
        this.entity.ReversesideofIDCard = res.url
        this.loading = false
      })
    },
    selfUpload2({ action, file, onSuccess, onError, onProgress }) {
      this.loading = true
      const formData = new FormData()
      let that = this
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        this.entity.Businesslicense = res.url
        this.loading = false
      })
    },
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl
          this.loading = false
        })
      }
    },
    UpLoad(info) {
      let file = info.file
      let param = new FormData() //创建form对象
      param.append('file', file) //通过append向form对象添加数据
      //console.log(param.get('file')); //FormData私有类对象访问不到，可以通过get判断值是否传进去
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' },
      }
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', param, config).then((res) => {
        var temp = {}
        temp.url = res.url
        temp.uid = this.fileList.length + 1
        temp.name = res.name
        temp.status = res.status
        this.fileList.unshift(temp)
        this.files.unshift(res.uid)
      })
    },
    cancel() {
      if (this.Isclear) {
        if (this.files.length > 0) {
          var FileNames = ''
          for (var i = 0; i < this.files.length; i++) {
            FileNames += this.files[i] + ','
          }
          console.log(FileNames)
          //console.log(FileNames);
          // let formData = new FormData();
          // formData.append('testArry',JSON.stringify(this.files));

          this.$http.post('/Base_Manage/Upload/DeleteFile', FileNames).then((res) => {})
        }
      }
      this.fileList = []
      this.files = []

      this.visible = false
    },
    Delete(ids) {
      this.$http.post('/Base_leasesystem_merchant_img/leasesystem_merchant_img/Delete', { id: ids }).then((res) => {})
    },
    handleRemove(file) {
      console.log(file)
      var a = file.url
      this.$http.post('/Base_Manage/Upload/DeleteFile', a.substr(21, 40) + ',').then((res) => {})
      if (!Isclear) {
        this.Delete(file.uid)
      }

      // const index = this.fileList.indexOf(file);
      // const newFileList = this.fileList.slice();
      // newFileList.splice(index, 1);20
      // this.fileList = newFileList;  http://localhost:5000/Upload/d2761faf90f947b2bfe4e3dd05a01146
    },
    selfUpload({ action, file, onSuccess, onError, onProgress }) {
      this.loading = true
      const formData = new FormData()
      let that = this
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        this.entity.FrontofIDCard = res.url
        this.loading = false
      })
    },
  },
}
</script>
